<template>
	<!-- 注册  图片上传 待完善-->
	<view class="container">
		<!-- <navigator url="/pages/myOrder/myOrder">我的订单</navigator> -->
		<view class="example">
			<!-- 基础用法，不包含校验规则 -->
			<uni-forms ref="formData" :rules="rules" :model="formData">
				<uni-forms-item label="负责人" name="director">
					<uni-easyinput v-model="formData.director" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="身份证号码" name="idCard">
					<uni-easyinput v-model="formData.idCard" placeholder="请输入身份证号码" />
				</uni-forms-item>
				<uni-forms-item label="手机号" name="mobile">
					<uni-easyinput v-model="formData.mobile" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="店名" name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入店名" />
				</uni-forms-item>
				<uni-forms-item label="工商营业执照号码" name="businessLicenseId">
					<uni-easyinput v-model="formData.businessLicenseId" placeholder="请输入工商营业执照号码" />
				</uni-forms-item>
				<uni-forms-item label="服务类型" name='serviceTypeIds'>
					<checkbox-group @change="checkboxChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="item in serviceType" :key="item.id"
							v-if="item.id != 4">
							<view>
								<checkbox :value="String(item.id)" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</checkbox-group>
				</uni-forms-item>
				<uni-forms-item label="地址" name="operatingArea">
					<view>
						<input @click="open" class="address" placeholder="请选择地址" :value="str.name" disabled
							placeholder-style="font-size: 24rpx" />
						<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
							@confirm="confirm" @cancel="cancel" :visible="visible" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="详细地址" name="address">
					<uni-easyinput v-model="formData.address" placeholder="请输入详细地址" />
				</uni-forms-item>
				<uni-forms-item label="商家介绍" name="description">
					<uni-easyinput type="textarea" v-model="formData.description" placeholder="请输入商家介绍" />
				</uni-forms-item>
				<uni-forms-item label="营业执照" name="businessLicenseImg">
					<uni-file-picker v-model="formData.businessLicenseImg" fileMediatype="image" :limit="1" mode="grid"
						@select="licenseUpload" @delete="licenseRemove" />
				</uni-forms-item>
				<uni-forms-item label="门面照片" name="photo">
					<uni-file-picker v-model="formData.photo" fileMediatype="image" :limit="1" mode="grid"
						@select="stadiumUpload" @delete="stadiumRemove" />
				</uni-forms-item>
				<uni-forms-item label="身份证正面" name="front">
					<uni-file-picker v-model="formData.front" fileMediatype="image" :limit="1" mode="grid"
						@select="idCardPicSideUpload" @delete="idCardPicSideRemove" />
				</uni-forms-item>
				<uni-forms-item label="身份证反面" name="opposite">
					<uni-file-picker v-model="formData.opposite" fileMediatype="image" :limit="1" mode="grid"
						@select="idCardPicBackUpload" @delete="idCardPicBackRemove" />
				</uni-forms-item>
				<button type="primary" @click="submit('formData')">提交</button>
			</uni-forms>
		</view>
	</view>
</template>
<script>
	import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		data() {
			return {
				//省市区
				visible: false,
				maskCloseAble: true,
				str: '',
				serviceType: [], //服务类型
				serviceTypeList: [],
				defaultValue: '',
				// defaultValue: ['河北省','唐山市','丰南区'],
				column: 3,
				num: 0,
				// 基础表单数据
				formData: {
					director: '', //	负责人姓名
					idCard: '', //	身份证号码
					mobile: '', //	手机号
					name: '', //	店名
					businessLicenseId: '', //	工商营业执照号码
					district: '', //经营区域
					operatingArea: '', //地址
					address: '', //详细地址
					description: '', //	商家介绍
					businessLicenseImg: {}, //	营业执照
					photo: {}, //	店铺门面照片
					front: [], // 身份证正面图片
					opposite: [], // 身份证反面图片
					serviceTypeIds: []
				},
				// 校验规则
				rules: {
					director: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idCard: {
						rules: [{
							required: true,
							errorMessage: '身份证号码不能为空'
						}]
					},
					mobile: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					name: {
						rules: [{
							required: true,
							errorMessage: '店名不能为空'
						}]
					},
					businessLicenseId: {
						rules: [{
							required: true,
							errorMessage: '工商营业执照号码不能为空'
						}]
					},
					introduction: {
						rules: [{
							required: true,
							errorMessage: '商家简介不能为空'
						}]
					}
				},
			}
		},
		components: {
			cityPicker
		},
		onLoad() {
			this.getType();
		},
		methods: {
			getType() {
				uni.request({
					url: 'http://localhost:8080/merchant/serviceType/list',
					success: resp => {
						this.serviceType = resp.data.rows
						// console.log(resp.data.rows)
					}
				})
			},
			//服务类型
			checkboxChange: function(e) {
				var items = this.serviceType,
					values = e.detail.value;
				var values = e.detail.value.map(function(value) {
					// 使用 Number() 函数尝试将每个值转换为数值类型  
					// 如果转换失败（例如，非数字字符串），则返回 NaN  
					return Number(value);
				});
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(Number(item.value))) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				this.formData.serviceTypeIds = values
				console.log(values)
			},
			// 移除营业执照
			licenseRemove(e) {
				this.formData.businessLicenseImg = {}
			},
			// 营业执照上传
			async licenseUpload(e) {
				this.uploadFile(e.tempFilePaths[0])
				// this.formData.businessLicense.url = e.tempFilePaths[0]
			},
			// 移除门面照片
			stadiumRemove(e) {
				this.formData.photo = {}
			},
			//	店铺门面上传
			async stadiumUpload(e) {
				this.num = 1
				// this.formData.photo = e.tempFilePaths[0]
				this.uploadFile(e.tempFilePaths[0])
				console.log(this.formData.photo.url);
			},
			//	移除身份证正面图片
			idCardPicSideRemove(e) {
				this.formData.front = {}
			},
			// 身份证正面上传
			async idCardPicSideUpload(e) {
				this.num = 2
				// console.log(e.tempFilePaths[0]);
				this.uploadFile(e.tempFilePaths[0])
				// this.formData.idCardPicSide=e.tempFilePaths[0]
				// this.formData.idCardPicSide.url = e.tempFilePaths[0]
				console.log(this.formData.front.url);
			},
			//	移除身份证反面图片
			idCardPicBackRemove(e) {
				this.formData.opposite = {}
			},
			// 身份证反面上传
			async idCardPicBackUpload(e) {
				this.num = 3
				// this.formData.opposite.url = e.tempFilePaths[0]
				// console.log('反面', this.formData.idCardPicBack);
				this.uploadFile(e.tempFilePaths[0])
				// console.log('反面',this.uploadFile(e.tempFilePaths[0]));
			},
			uploadFile(imgUrl) {
				var _this = this;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'http://localhost:8080/file/upload',
						filePath: imgUrl,
						name: 'file',
						success: (resp) => {
							if (resp.statusCode == 200) {
								// resolve(JSON.parse(resp.data).url);
								console.log('upload', JSON.parse(resp.data).data)
								// console.log('upload',imgUrl)
								if (_this.num == 0) {
									//营业执照
									_this.formData.businessLicenseImg = JSON.parse(resp.data).data;
								} else if (_this.num == 1) {
									_this.formData.photo = JSON.parse(resp.data).data;
								} else if (_this.num == 2) {
									_this.formData.front = JSON.parse(resp.data).data;
								} else {
									_this.formData.opposite = JSON.parse(resp.data).data;
								}
								// return JSON.parse(resp.data);
							} else {
								reject(new Error('Upload failed'));
							}
						},
					})
				})
			},
			// 表单提交
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					// console.log('success', res);
					console.log(this.formData)
					uni.showToast({
						title: `校验通过`
					})
					uni.request({
						url: 'http://localhost:8080/merchant/shop/register',
						method: "POST",
						data: this.formData,
						success: resp => {
							console.log(resp)
							if(resp.data.code==200){
								uni.navigateTo({
									url:'/pages/login/login'
								})
							}
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			//省市区
			open() {
				this.visible = true
			},
			confirm(val) {
				console.log(val)
				this.str = val
				this.visible = false
				this.formData.operatingArea = val.name
				// console.log('err', err);
			},
			cancel() {
				this.visible = false
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！',
				path: '/pages/cityPicker/cityPicker'
			}
		},
		onShareTimeline(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'data-cityPicker省市区地址选择器！'
			}
		},

	}
</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.address {
		width: 95%;
		height: 70rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 10rpx;
		padding-left: 20rpx;
	}

	uni-checkbox-group {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	// .uni-list-cell uni-list-cell-pd uni-label-pointer

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.uni-forms-item__content {
		line-height: 70rpx;
	}

	.uni-list-cell {
		width: 180rpx;
		margin: 10rpx 0;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>